import React, { useRef, useState, useEffect } from "react";
import { Form, Input, message } from "antd";
import Workspace from "@/models/workspace";
import paths from "@/utils/paths";
import { useTranslation } from "react-i18next";
import ModalWrapper from "@/components/ModalWrapper";
import Close from "@/media/sidebar/close.png";
const noop = () => false;
const noData = () => {};
export default function NewSessionModal({
  hideModal = noop,
  workspaceItem = noData,
}) {
  const formEl = useRef(null);
  const { t } = useTranslation();
  const handleCreate = async () => {
    const { thread, error } = await Workspace.threads.new(workspaceItem.slug);
    if (error) {
      showMessage(error);
      return;
    }
    window.location.replace(
      paths.workspace.thread(workspaceItem.slug, thread.slug)
    );
  };

  const onFinish = () => {
    handleCreate();
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  const showMessage = (error) => {
    message.error(
      `Could not create thread - ${error}` || "This is an error message"
    );
  };

  return (
    <ModalWrapper isOpen={true}>
      <div className="w-[320px] bg-theme-bg-secondary shadow overflow-hidden rounded-[12px]">
        <div className="relative px-[16px] pt-[12px]">
          <div className="w-full flex gap-x-2 items-center">
            <h3 className="text-sm font-semibold overflow-hidden overflow-ellipsis whitespace-nowrap add-space-title">
              {t("new-session.title")}
            </h3>
          </div>
          <button
            onClick={hideModal}
            type="button"
            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
          >
            <img src={Close} alt="Close" className="w-[20px]" />
          </button>
        </div>
        <div
          className="h-full w-full overflow-y-auto"
          style={{ maxHeight: "calc(100vh - 200px)" }}
        >
          <Form
            ref={formEl}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <div className="py-[20px] px-[16px] space-y-2 flex-col">
              <div className="w-full flex flex-col gap-y-4">
                <div>
                  <Form.Item
                    name="name"
                    rules={[
                      {
                        required: true,
                        message: "请输入对话名称",
                      },
                    ]}
                  >
                    <Input
                      name="name"
                      type="text"
                      id="name"
                      className="w-full block py-[8px] px-[12px] rounded-[8px] space-input placeholder:text-space-input-placeholder hover:text-space-input-hover"
                      placeholder={t("new-session.placeholder")}
                      autoComplete="off"
                      autoFocus={false}
                    />
                  </Form.Item>
                </div>
              </div>
            </div>
            <div className="flex w-full justify-center items-center pb-[24px]">
              <button
                onClick={hideModal}
                type="submit"
                className="transition-all duration-300 font-semibold mr-[8px] rounded-[100px] text-sm px-[40px] py-[8px] space-submit-btn"
              >
                取消
              </button>

              <button
                type="submit"
                className="transition-all duration-300 font-semibold rounded-[100px] text-sm px-[40px] py-[8px] space-submit-btn submit-btn"
              >
                确定
              </button>
            </div>
          </Form>
        </div>
      </div>
    </ModalWrapper>
  );
}

// eslint-disable-next-line react-refresh/only-export-components
export function useNewSessionModal() {
  const [showingSession, setShowingSession] = useState(false);
  const showSessionModal = () => {
    setShowingSession(true);
  };
  const hideSessionModal = () => {
    setShowingSession(false);
  };

  return { showingSession, showSessionModal, hideSessionModal };
}
